<!-- 数据库内正确属性： mood_id,tag_name, mood_name -->
<template>
  <div class="moodaddTags">
    <div class="mood-tags-container">
      <div class="mood-tags">情绪</div>
    </div>

    <!-- 新建标签的表单（始终显示） -->
    <div class="tag-form">
      <input
        type="text"
        v-model="newTag.name"
        placeholder="输入标签名称"
        @keyup.enter="addNewTag"
        class="tag-input"
      />
      <select v-model="newTag.emoji" class="tag-select">
        <option value="">选择表情</option>
        <option value="😄">开心</option>
        <option value="😢">伤心</option>
        <option value="😡">愤怒</option>
        <option value="😪">沮丧</option>
        <!-- 其他表情选项... -->
      </select>
      <button @click="addNewTag" class="tag-button">新建</button>
    </div>

    <!-- 标签列表 -->
    <div class="tag-list">
      <div
        class="tag-item"
        v-for="(tag, index) in tags"
        :key="tag. mood_id"
        @click="showEditForm(index)"
      >
        <span v-if="!editingIndex || editingIndex !== index" class="tag-text">
          {{ tag.emoji }} {{ tag.name }}
        </span>
        <input
          v-else
          type="text"
          class="edit-input"
          v-model="editingTag.name"
          @blur="saveEditedTag(index)"
        />
        <button @click.stop="deleteTag(index)" class="tag-delete-button">
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      tags: [],
      newTag: { name: '晴天', emoji: '开心' },
      editingIndex: -1, // 初始化没有编辑的条目
    };
  },
  created() {
    this.fetchTags();
  },
  methods: {
    fetchTags() {
      axios.get('/api/mood-tags/${this.placeID}')
        .then(response => {
          this.tags = response.data;
        })
        .catch(error => {
          console.error('Error fetching mood-tags:', error);
        });
    },
    addNewTag() {
      if (!this.newTag.name || !this.newTag.emoji) return;
      // 在新标签对象中加入 placeID
      const tagWithPlace = { ...this.newTag, place_id: this.placeID };
      axios.post('/api/mood-tags', tagWithPlace)
        .then(response => {
          this.tags.push(response.data); // 假设后端返回新增的完整 tag 数据
          this.resetForm();
        })
        .catch(error => {
          console.error('Error adding new mood-tag:', error);
        });
    },
    deleteTag(index) {
      const tagId = this.tags[index].mood_id;
      axios.delete(`/api/mood-tags/${tagId}`, {
        params: { place_id: this.placeID } // 发送 placeID 作为参数
      }).then(() => {
          this.tags.splice(index, 1);
      }).catch(error => {
          console.error('Error deleting mood-tag:', error);
      });
    },
    saveEditedTag(index) {
      const tag = this.tags[index];
      if (this.editingIndex !== -1) {
        axios.put(`/api/mood-tags/${tag.mood_id}`, { name: tag.tag_id, emoji: tag.mood_id })
          .then(response => {
            this.tags[index] = response.data; // 更新为服务器返回的最新数据
            this.resetForm();
          })
          .catch(error => {
            console.error('Error updating mood-tag:', error);
          });
      }
    },
    showEditForm(index) {
      this.editingIndex = index;
      this.editingTag = { ...this.tags[index] };
    },
    resetForm() {
      this.newTag = { name: '', emoji: '' };
      this.editingIndex = -1;
      this.editingTag = {};
    },
  },
};
</script>


<style scoped>
.moodaddTags {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'SimSun', serif; /* 设置字体为宋体 */
  padding: 20px;
  margin-bottom: 20px;
}

.mood-tags-container {
  background-color: rgba(180, 237, 235, 0.8);
  border-radius: 10px;
  padding: 10px 20px;
  margin-bottom: 20px;
  width: 100%;
  max-width: 600px;
}

.mood-tags {
  color: white;
  font-family: 'SimSun', serif;
  font-size: 18px;
  font-weight: bold;
}

.tag-form {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 600px;
}

.tag-input,
.tag-select {
  padding: 8px 12px;
  border: none;
  border-radius: 20px;
  margin-right: 10px;
  font-family: 'SimSun', serif;
  font-size: 14px;
  flex: 1;
}

.tag-select {
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>');
  background-position: calc(100% - 20px) 50%;
  background-repeat: no-repeat;
  background-size: 16px;
  padding-right: 40px;
}

.tag-button {
  font-size: 14px;
  font-family: 'SimSun', serif;
  padding: 8px 16px;
  border: none;
  border-radius: 10px;
  background-color: rgba(180, 237, 235, 0.8);
  cursor: pointer;
  color: rgb(249, 249, 250);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 600px;
}

.tag-item {
  display: inline-flex;
  align-items: center;
  padding: 8px;
  border: 2px solid rgb(139, 203, 200);
  border-radius: 15px;
  margin-right: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  font-size: 14px;
}

.tag-text {
  margin-right: 10px;
}

.edit-input {
  padding: 8px;
  border: 2px solid rgb(139, 203, 200);
  border-radius: 20px;
  font-family: 'SimSun', serif;
  font-size: 14px;
}

.tag-delete-button {
  margin-left: 10px;
  padding: 5px;
  border: none;
  border-radius: 50%;
  background-color: #52b9e4ac;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tag-delete-button:hover {
  background-color: #e4c1ea;
}
</style>











